<template>
  <div class="home-page">
    <div class="app-container" :class="{ fullscreen: isFullscreen }">
      <LeftMenu @setFullscreenStatus="setFullscreenStatus"></LeftMenu>
      <div class="content-box"><router-view></router-view></div>
    </div>
    <template>
      <Setting :visible="showSettingDialog" @close="closeSetting"></Setting>
      <UserInfo ref="userInfoRef"></UserInfo>
      <FullImage ref="fullImageRef"></FullImage>
      <RtcPrivateVideo ref="rtcPrivateVideoRef"></RtcPrivateVideo>
      <RtcGroupVideo ref="rtcGroupVideoRef"></RtcGroupVideo>
    </template>
  </div>
</template>

<script setup lang="ts">
const userInfoRef = ref(null);
const fullImageRef = ref(null);
const rtcPrivateVideoRef = ref(null);
const rtcGroupVideoRef = ref(null);
const showSettingDialog = ref(false);
const isFullscreen = ref(true);
onMounted(() => {
  _init();
});
onUnmounted(() => {});
function _init() {}
function closeSetting() {}
function setFullscreenStatus() {
  isFullscreen.value = !isFullscreen.value;
}
</script>

<style scoped lang="scss">
.home-page {
  height: 100vh;
  outline: none !important;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  background: var(--im-color-primary-light-9);

  .app-container {
    width: 62vw;
    height: 80vh;
    display: flex;
    min-height: 600px;
    min-width: 970px;
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--im-box-shadow-dark);
    transition: 0.2s;

    &.fullscreen {
      transition: 0.2s;
      width: 100vw;
      height: 100vh;
    }
  }
  .content-box {
    flex: 1;
    padding: 0;
    background-color: #fff;
    text-align: center;
  }
}
</style>
